<template>
  <div>
    <t-sticky>
      <t-navbar
        title="设置密码"
        :fixed="false"
        left-arrow
        @left-click="handleBack"
      />
    </t-sticky>
    <div class="warrper">
      <div class="info-box">
        <t-input
          label=""
          type="number"
          v-model="phoneNumber"
          readonly
          placeholder="请输入手机号"
        >
          <template #prefixIcon>
            <img class="icon" src="@/assets/login/phone.png" />
          </template>
        </t-input>
      </div>
      <div class="info-box">
        <t-input
          v-model="sms"
          type="number"
          label=""
          placeholder="请输入验证码"
        >
          <template #prefixIcon>
            <img class="icon" src="@/assets/login/code.png" />
          </template>
          <template #suffix>
            <div class="suffix">
              <div class="suffix--line"></div>
              <div class="verify" aria-role="button" @click="onSendSms">
                {{ smsTxt }}
              </div>
            </div>
          </template>
        </t-input>
      </div>
      <div class="info-box">
        <div class="border-b">
          <div class="txt">设置密码</div>
          <div class="input-box">
            <n-input
              type="password"
              show-password-on="click"
              placeholder="6-12位以内的数字和字母"
              :maxlength="12"
              :minlength="6"
              :bordered="false"
              v-model:value="pwd"
            />
          </div>
        </div>
      </div>
      <div class="info-box">
        <div class="border-b">
          <div class="txt">确认密码</div>
          <div class="input-box">
            <n-input
              type="password"
              show-password-on="click"
              placeholder="6-12位以内的数字和字母"
              :maxlength="12"
              :minlength="6"
              :bordered="false"
              v-model:value="againPwd"
            />
          </div>
        </div>
      </div>
      <div class="btn-box">
        <t-button class="btn" size="large" @click="onSubmit">确定</t-button>
      </div>
    </div>
  </div>
</template>
<script setup>
import { reactive, toRefs, onMounted, onUnmounted } from "vue";
import { useRouter } from "vue-router";
import { Toast } from "tdesign-mobile-vue";
import loginApi from "@/api/loginApi";
const router = useRouter();
let timer = null;
const state = reactive({
  phoneNumber: "",
  sms: "",
  smsTxt: "发送验证码",
  smsTime: 60,
  pwd: "",
  againPwd: "",
});
const { phoneNumber, sms, smsTxt, pwd, againPwd } = toRefs(state);
// 返回上一页
const handleBack = () => {
  router.back();
};
// 发送验证码
function onSendSms() {
  if (state.smsTime === 60) {
    getCode();
  }
}
const getCode = async () => {
  if (state.phoneNumber == "") {
    Toast({
      duration: 800,
      message: "请输入手机号码",
    });
    return;
  }
  if (!/^1[3-9]\d{9}$/.test(state.phoneNumber)) {
    Toast({
      duration: 800,
      message: "手机号码格式不正确",
    });
    return;
  }
  timer = setInterval(() => {
    if (state.smsTime > 0) {
      state.smsTime--;
      state.smsTxt = state.smsTime + "s";
    } else {
      state.smsTime = 60;
      state.smsTxt = "发送验证码";
      console.log("------------");
      clearInterval(timer);
    }
  }, 1000);
  const result = await loginApi.sendMsg(state.phoneNumber);
  if (result.code === 0) {
    Toast({
      duration: 800,
      message: "验证码发送成功",
    });
  } else {
    Toast({
      duration: 800,
      message: result.msg,
    });
  }
};
// 修改密码
function onSubmit() {
  console.log("state.pwd", state.pwd);
  if (!/^[a-zA-Z0-9]+$/.test(state.pwd) || state.pwd.length < 6) {
    return Toast("请输入6-12数字和字母");
  }
  if (!/^[a-zA-Z0-9]+$/.test(state.againPwd) || state.againPwd.length < 6) {
    return Toast("请输入6-12数字和字母");
  }
  if (state.pwd !== state.againPwd) {
    return Toast("输入的密码不一致");
  }
  loginApi
    .savePwd({
      pwd: state.pwd,
      msg: state.sms,
    })
    .then((res) => {
      console.log("r", res);
      if (res.code == 0) {
        Toast("密码设置成功");
        setTimeout(() => {
          router.back();
        }, 1000);
      } else {
        Toast({
          duration: 800,
          message: res.msg,
        });
      }
    })
    .catch((err) => {
      console.log("c", err);
      Toast({
        duration: 800,
        message: err.msg,
      });
    });
}
onMounted(() => {
  state.phoneNumber = localStorage.getItem("userInfo")
    ? JSON.parse(localStorage.getItem("userInfo")).phone
    : "";
});
onUnmounted(() => {
  if (timer) {
    clearInterval(timer);
  }
});
</script>
<style lang="scss" scoped>
::v-deep(.t-input) {
  padding: 0;
  padding-bottom: 16px;
  border-bottom: 1px solid $be9-color;
  background-color: transparent;
}
.warrper {
  .tip {
    font-size: 14px;
    text-align: left;
    color: $b6c-color;
    padding-left: 16px;
    padding-bottom: 10px;
  }
  .info-box {
    padding: 16px;
    padding-bottom: 0;
    .border-b {
      display: flex;
      align-items: center;
      justify-content: center;
      border-bottom: 1px solid $be9-color;
      padding-bottom: 6px;
    }
    .txt {
      padding-right: 10px;
    }
    .input-box {
      flex: 1;
      text-align: left;
    }
  }
  .icon {
    width: 20px;
  }
  .verify {
    color: $parm-c-color;
  }
  .btn-box {
    padding: 16px;
    .btn {
      width: 100%;
      font-size: 16px;
      @extend .btn-bg;
    }
  }
}
</style>
